<template>
    <div class="rf-cards-scroller">
        <div class="rf-cards-scroller-crop">
            <div class="rf-cards-scroller-overflow">
                <div class="rf-cards-scroller-platter">
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/14.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/22.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/23.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/14.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/23.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/22.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                    <div class="rf-cards-scroller-item">
                        <div class="content">
                            <img src="../../../assets/14.webp" alt="">
                            <p class="game-name">我是游戏名称</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
</script>

<style lang="scss" scoped>
.rf-cards-scroller {
    position: relative;
    color: #fff;

    .rf-cards-scroller-crop {
        overflow: hidden;
        padding-bottom: 38px;
        height: 200px;

        .rf-cards-scroller-overflow {
            flex-wrap: nowrap;
            display: flex;
            overflow-x: auto;
            flex-direction: row;

            .rf-cards-scroller-platter {
                display: inline-flex;
                padding-bottom: 40px;
                padding-top:0;
                vertical-align: top;
                width: 100%;
                padding-left: 20px;

                .rf-cards-scroller-item {
                    display: flex;
                    flex-direction: row;
                    height: 200px;
                    border-radius: 10px;
                    margin-right: 12px;
                    background-size: 350px;
                    .content {
                        width: 110px;
                        img{
                            width: 100%;
                        }
                        .game-name{
                            font-size: 12px;
                            text-align: center;
                        }
                    }
                }
            }
        }

    }
}

.gameInfoItem {
    display: flex;
    margin-bottom: 10px;

    .gameIndex {
        width: 15px;
        text-align: center;
        font-weight: bold;
        flex-grow: 0;
        display: flex;
        align-items: center;
    }

    .gameDownload {
        flex-grow: 0;
        display: flex;
        align-items: center;

        .download-button {
            width: 80px;
            text-align: center;
            height: 24px;
            // margin: 69px 0 1px 111px;
            // padding: 15.5px 85.9px 16.5px 85.1px;
            object-fit: contain;
            border-radius: 37px;
            font-size: 13px;
            background-color: #eb49a8;
        }
    }

    .gameLogo {
        width: 90px;
        flex-grow: 0;

        img {
            width: 77px;
            height: 77px;
        }
    }

    .gameInfo {
        flex-grow: 1;
        display: flex;
        align-items: start;
        flex-direction: column;
        font-size: 13px;
        padding-left: 10px;

        .gameName {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 120px;
        }

        .gameDesc {
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 120px;
        }

        .systemLogo {
            .slogo {
                display: inline-block;
                width: 13px;
                height: 13px;
                // background-color: #eb49a8;
                margin-right: 5px;

                &.ios {
                    background: url('../../../assets/apple-logo.png') no-repeat center;
                    background-size: contain;
                }

                &.anzhuo {
                    background: url('../../../assets/anzhuo-logo.png') no-repeat center;
                    background-size: contain;
                }

                &.windows {
                    background: url('../../../assets/windows-icon.png') no-repeat center;
                    background-size: contain;
                }
            }
        }
    }
}
</style>
